<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fuxiaohai</title>
  <link rel="stylesheet" href="css/fuxiaohai.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2108513_2wd2lf77iax.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>

<body>
  <div class="picWall">
    <div class="nav">
      <ul>
        <li class="nav-shouye">首页</li>
        <li class="nav-jianjie">个人简介</li>
        <li class="nav-jineng">专业技能</li>
        <li class="nav-jiaoyu">教育</li>
        <li class="nav-jingli">工作经历</li>
        <li class="nav-aihao">我的爱好</li>
        <li class="nav-lianxiwo">联系我</li>
      </ul>
    </div>
    <div class="touxiang">
      <!-- <img src="img/傅晓海的头像.jpeg" alt=""> -->
    </div>
    <div class="name">
      <h2>傅晓海</h2>
    </div>
    <div class="sendWord">
      <p>世界上本没有路，走的人多了，也便有了路。</p>
    </div>
  </div>
  <div class="container">
    <div class="introduction">
      <div class="about">
        <ul>
          <li>
            <h3>关于我</h3>
          </li>
          <li>
            <p>大家好！我叫傅晓海，是淮北师范大学的一名学生。</p>
          </li>
          <li>
            <p>这是我做的一个个人简介页面，希望通过这个页面让大家更多的了解我！</p>
          </li>
        </ul>
      </div>
      <div class="basic-Information">
        <ul>
          <li>
            <h3>基本信息</h3>
          </li>
          <li>年龄：20岁</li>
          <li>电子邮件：2841251634@qq.com</li>
          <li>电话：13085074833</li>
          <li>地址：安徽省淮北市烈山镇烈山区淮北师范大学滨湖校区</li>
        </ul>
      </div>
    </div>

    <!-- 专业技能  -->
    <div class="profition">
      <p class="profition-title">专业技能</p>
      <div class="content">
        <div class="content-left">
          <div class="contentOne">
            <span>HTML</span>
            <span>80%</span>
            <div class="html">
              <div class="content-one"></div>
            </div>
          </div>
          <div class="contentTwo">
            <span>Java</span>
            <span>60%</span>
            <div class="html">
              <div class="content-two"></div>
            </div>
          </div>
          <div class="contentThree">
            <span>JavaScript</span>
            <span>70%</span>
            <div class="html">
              <div class="content-three"></div>
            </div>
          </div>
        </div>
        <div class="content-right">
          <div class="contentFour">
            <span>CSS</span>
            <span>90%</span>
            <div class="html">
              <div class="content-four"></div>
            </div>
          </div>
          <div class="contentFive">
            <span>PhotoShop</span>
            <span>50%</span>
            <div class="html">
              <div class="content-five"></div>
            </div>
          </div>
          <div class="contentSix">
            <span>Vue</span>
            <span>88%</span>
            <div class="html">
              <div class="content-six"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 教育 -->
    <div class="eduction">
      <p class="eduName">教育</p>
      <div class="eduOne">
        <div class="edu-one">
          <p>2014-2017年</p>
          <p>程集中学</p>
        </div>
        <div class="edu-two">
          <p>在高中时期成绩非常的优秀，经常受到老师的表扬，是同学们心中的榜样。</p>
        </div>
      </div>
      <div class="eduTwo">
        <div class="edu-three">
          <p>2017-2020年</p>
          <p>就读于淮北师范大学</p>
        </div>
        <div class="edu-four">
          <p>大学时期参加过许多的社团活动，积极的做事，参与了一些领导的工作。</p>
          <p>2018年将大学英语四级和大学英语六级都考过了，同时也考过了全国计算机二级跟三级。</p>
        </div>
      </div>
    </div>
    <!-- 工作经验 -->
    <div class="work-experience">
      <p class="exp-title">工作经历</p>
      <div class="exe-one">
        <p>2020年在深圳华为科技有限公司当实习生，实习了半年。</p>
      </div>
      <div class="exe-two">
        <p>2021年就职于杭州阿里巴巴天猫淘宝，任职Java工程师，工作了2年。</p>
      </div>
      <div class="exe-three">
        　　　　　　<p>2023年在北京腾讯科技有限公司担任项目经理，专注于腾讯游戏的开发。</p>
      </div>
    </div>
    <!-- 我的爱好 -->
    <div class="MyFavorite">
      <div class="btn-left"><i class="iconfont icon-you"></i></div>
      <div class="btn-right"><i class="iconfont icon-zuo"></i></div>
      <p class="favorite">我的爱好</p>
      <div class="swiper">
        <div class="swiper-content">
          <img src="img/听音乐.jpg" alt="">
          <img src="img/看书.jpg" alt="">
          <img src="img/看电影.jpg" alt="">
          <img src="img/美食.jpg" alt="">
          <img src="img/运动.jpg" alt="">
        </div>
        <div id="btns">
          <span class="current"></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

    </div>
    <!-- 联系我 -->
    <div class="contact">
      <p class="contactMe">联系我</p>
      <div class="contact-left">
         <form action="#">
           <input type="text" placeholder="姓名："><br>
           <input type="text" placeholder="问题："><br>
           <input type="text" placeholder="邮件："><br>
           <button class="tijiao">提交</button>
         </form>
      </div>
      <div class="contact-right">
        <div class="contact-top">
          <ul>
            <li>地址：<input type="text"></li>
            <li>电话：<input type="text"></li>
            <li>邮件：<input type="text"></li>
          </ul>
        </div>
        <div class="contact-down">
          <ul>
            <li>还可以通过以下方式联系我：</li>
            <li><i class="iconfont icon-qq"></i></li>
            <li><i class="iconfont icon-weibo"></i></li>
            <li><i class="iconfont icon-weixin"></i></li>
          </ul>
       </div>
      </div>
    </div>
  </div>
  </div>
  <div class="footer">
    <div class="hehe"></div>
    <div class="footer-center">
      <p>Created By Xiaohai Fu</p>
      <p>CopyRight@2020.Company name All rights reserved</p>
    </div>
  </div>
  <div class="scoll">
    <i class="iconfont icon-shang"></i>
  </div>
  <script>
       let index =0;
        $(".btn-right").click(function(){
            index++;
            if(index>4){
                index = 0;
            }
           animate(1000);
        })
        // 2.点击一下left index-- 达到下标志值
        $(".btn-left").click(function(){
            index--;
            if(index<0){
                index = 4;
            }
           animate(1000);
        })
       
        // 点击焦点让对应下表的图片显示，重置下标值
        $("#btns span").click(function(){
            index = $(this).index();
           animate(1000);
        })

        function animate(speed){
            $(".swiper-content img").eq(index).fadeIn(speed).siblings().fadeOut(speed);
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
        }


        $(window).scroll(function(){
            let scrollTop = $(window).scrollTop();
            let opacity;
            console.log(scrollTop);
            opacity = scrollTop/200;

            if(scrollTop>=200){
            opacity=1;
        }
        
        $(".scoll").css({opacity:opacity});
        }) 
        $(".scoll").click(function(){
            $("html").animate({scrollTop:"0px"},1000);
        })
         
        //  1.首页
        $(function(){
            var shouyeTop = $('.picWall').offset().top;
            $('.nav-shouye').click(function(){
                 $('html,body').animate({scrollTop:shouyeTop},500);
            })
        })
         
        //  2.关于我
        $(function(){
            var jianjieTop = $('.introduction').offset().top;
            $('.nav-jianjie').click(function(){
                 $('html,body').animate({scrollTop:jianjieTop},500);
            })
        })

        // 3.
        $(function(){
            var jinengTop = $('.profition').offset().top;
            $('.nav-jineng').click(function(){
                 $('html,body').animate({scrollTop:jinengTop},500);
            })
        })

        // 4.教育
        $(function(){
            var jiaoyuTop = $('.eduction').offset().top;
            $('.nav-jiaoyu').click(function(){
                 $('html,body').animate({scrollTop:jiaoyuTop},500);
            })
        })

        // 5.工作经历
        $(function(){
            var jingliTop = $('.work-experience').offset().top;
            $('.nav-jingli').click(function(){
                 $('html,body').animate({scrollTop:jingliTop},500);
            })
        })

        // 6.我的爱好
        $(function(){
            var aihaoTop = $('.MyFavorite').offset().top;
            $('.nav-aihao').click(function(){
                 $('html,body').animate({scrollTop:aihaoTop},500);
            })
        })

        // 7.联系我
        $(function(){
            var lianxiwoTop = $('.contact').offset().top;
            $('.nav-lianxiwo').click(function(){
                 $('html,body').animate({scrollTop:lianxiwoTop},500);
            })
        })
  </script>
</body>

</html>